<template>
  <view class="teacher-detail-container">
    <!-- 顶部渐变背景 -->
   <!-- <view class="header-gradient">
      <view class="gradient-circle circle-1"></view>
      <view class="gradient-circle circle-2"></view>
    </view> -->

    <!-- 自定义导航栏 -->
 <!--   <view class="custom-navbar">
      <view class="navbar-left" @click="goBack">
        <u-icon name="arrow-left" color="#fff" size="20"></u-icon>
      </view>
      <view class="navbar-title">教员详情</view>
      <view class="navbar-right" @click="collectTeacher">
        <u-icon name="star" color="#fff" size="20"></u-icon>
      </view>
    </view> -->

    <!-- 教员基本信息 -->
    <view class="teacher-info-section card">
      <view class="teacher-header">
        <view class="teacher-avatar">
          <u-avatar :src="teacherInfo.avatar" size="80"></u-avatar>
          <view class="online-status" v-if="teacherInfo.isOnline"></view>
        </view>
        <view class="teacher-basic">
          <text class="teacher-name">{{ teacherInfo.name }}</text>
          <text class="teacher-school">{{ teacherInfo.school }}</text>
          <view class="teacher-rating">
            <u-rate 
              :value="teacherInfo.rating" 
              size="16" 
              disabled
              active-color="#FFD700"
            ></u-rate>
            <text class="rating-text">{{ teacherInfo.rating }} ({{ teacherInfo.reviewCount }}条评价)</text>
          </view>
        </view>
        <view class="teacher-price">
          <text class="price">¥{{ teacherInfo.hourlyRate }}/时</text>
        </view>
      </view>
      
      <view class="teacher-subjects">
        <u-tag 
          v-for="subject in teacherInfo.subjects" 
          :key="subject"
          :text="subject" 
          type="primary"
          plain
          :custom-style="{ marginRight: '10rpx', marginBottom: '10rpx' }"
        ></u-tag>
      </view>
      
      <view class="teacher-stats">
        <view class="stat-item">
          <text class="stat-number">{{ teacherInfo.experienceYears }}</text>
          <text class="stat-label">年经验</text>
        </view>
        <view class="stat-item">
          <text class="stat-number">{{ teacherInfo.studentCount }}</text>
          <text class="stat-label">学生数</text>
        </view>
        <view class="stat-item">
          <text class="stat-number">{{ teacherInfo.completedOrders }}</text>
          <text class="stat-label">完成订单</text>
        </view>
      </view>
    </view>
    
    <!-- 教学介绍 -->
    <view class="intro-section card">
      <view class="section-title">教学介绍</view>
      <text class="intro-text">{{ teacherInfo.introduction }}</text>
    </view>
    
    <!-- 教学经验 -->
    <view class="experience-section card">
      <view class="section-title">教学经验</view>
      <view class="experience-list">
        <view 
          class="experience-item"
          v-for="(exp, index) in teacherInfo.experiences"
          :key="index"
        >
          <view class="exp-title">{{ exp.title }}</view>
          <view class="exp-desc">{{ exp.description }}</view>
        </view>
      </view>
    </view>
    
    <!-- 学员评价 -->
    <view class="reviews-section card">
      <view class="section-header">
        <text class="section-title">学员评价</text>
        <text class="more-text" @click="showAllReviews">查看全部</text>
      </view>
      <view class="review-list">
        <view 
          class="review-item"
          v-for="review in reviewList"
          :key="review.id"
        >
          <view class="review-header">
            <u-avatar :src="review.avatar" size="40"></u-avatar>
            <view class="review-info">
              <text class="reviewer-name">{{ review.studentName }}</text>
              <view class="review-rating">
                <u-rate 
                  :value="review.rating" 
                  size="12" 
                  disabled
                  active-color="#FFD700"
                ></u-rate>
              </view>
            </view>
            <text class="review-time">{{ formatTime(review.createdAt) }}</text>
          </view>
          <text class="review-content">{{ review.content }}</text>
        </view>
      </view>
    </view>
    
    <!-- 底部操作栏 -->
    <view class="bottom-actions">
      <u-button 
        type="primary" 
        plain
        @click="contactTeacher"
        :custom-style="actionButtonStyle"
      >
        联系教员
      </u-button>
      <u-button 
        type="primary"
        @click="bookTeacher"
        :custom-style="actionButtonStyle"
      >
        立即预约
      </u-button>
    </view>
  </view>
</template>

<script>
import { getTeacherDetail } from '@/api/teacher'

export default {
  data() {
    return {
      teacherId: null,
      loading: false,
      teacherInfo: {
        id: null,
        name: '',
        avatar: '',
        school: '',
        subjects: [],
        hourlyRate: 0,
        rating: 0,
        reviewCount: 0,
        experienceYears: 0,
        studentCount: 0,
        completedOrders: 0,
        isOnline: false,
        introduction: '',
        experiences: []
      },
      reviewList: [],
      actionButtonStyle: {
        borderRadius: '50rpx',
        height: '80rpx',
        flex: 1,
        margin: '0 10rpx'
      }
    }
  },
  
  onLoad(options) {
    if (options.id) {
      this.teacherId = options.id
      this.loadTeacherDetail()
    }
  },
  
  methods: {
    // 加载教员详情
    async loadTeacherDetail() {
      if (this.loading) return
      
      this.loading = true
      uni.showLoading({ title: '加载中...' })
      
      try {
        const response = await getTeacherDetail(this.teacherId)
        
        if (response.code === 200 && response.data) {
          const data = response.data
          
          // 映射后端数据到前端格式
          this.teacherInfo = {
            id: data.id,
            name: data.realName || '教员',
            avatar: data.avatarUrl || '/static/icons/default-avatar.png',
            school: this.formatSchoolInfo(data),
            subjects: data.subjects || [],
            hourlyRate: data.hourlyRate || 0,
            rating: parseFloat(data.rating) || 0,
            reviewCount: data.reviewCount || 0,
            experienceYears: data.experienceYears || 0,
            studentCount: data.studentCount || 0,
            completedOrders: data.orderCount || 0,
            isOnline: data.isOnline || false,
            introduction: data.intro || '暂无介绍',
            experiences: this.formatExperiences(data)
          }
          
          // TODO: 加载评价列表
          this.loadReviews()
        }
      } catch (error) {
        console.error('加载教员详情失败:', error)
        uni.showToast({
          title: error.message || '加载失败',
          icon: 'none'
        })
      } finally {
        this.loading = false
        uni.hideLoading()
      }
    },
    
    // 格式化学校信息
    formatSchoolInfo(data) {
      if (data.school && data.education) {
        return `${data.school} · ${data.education}`
      }
      return data.school || data.education || '未知学校'
    },
    
    // 格式化教学经验
    formatExperiences(data) {
      const experiences = []
      
      if (data.school && data.education) {
        experiences.push({
          title: `${data.school} - ${data.education}`,
          description: '专业功底扎实，理论知识丰富'
        })
      }
      
      if (data.experienceYears && data.experienceYears > 0) {
        experiences.push({
          title: `${data.experienceYears}年教学经验`,
          description: `累计服务${data.studentCount || 0}名学生，完成${data.orderCount || 0}个订单`
        })
      }
      
      return experiences
    },
    
    // 加载评价列表
    async loadReviews() {
      try {
        // TODO: 调用评价列表API
        // const response = await getTeacherReviews(this.teacherId, { page: 1, size: 3 })
        // this.reviewList = response.data.list
        
        // 临时使用模拟数据
        this.reviewList = [
          {
            id: 1,
            studentName: '家长用户',
            avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=student1',
            rating: 5,
            content: '老师教学认真负责，讲解清晰易懂，孩子的成绩有了很大提升！',
            createdAt: new Date(Date.now() - 2 * 24 * 60 * 60 * 1000)
          }
        ]
      } catch (error) {
        console.error('加载评价失败:', error)
      }
    },
    
    // 联系教员
    contactTeacher() {
      uni.navigateTo({
        url: `/pages/message/chat?teacherId=${this.teacherId}&teacherName=${encodeURIComponent(this.teacherInfo.name)}`
      })
    },
    
    // 预约教员
    bookTeacher() {
      uni.navigateTo({
        url: `/pages/order/book?teacherId=${this.teacherId}`
      })
    },
    
    // 查看全部评价
    showAllReviews() {
      uni.navigateTo({
        url: `/pages/teacher/reviews?teacherId=${this.teacherId}`
      })
    },
    
    // 格式化时间
    formatTime(time) {
      const now = new Date()
      const target = new Date(time)
      const diff = now - target
      
      if (diff < 24 * 60 * 60 * 1000) {
        return '今天'
      } else if (diff < 2 * 24 * 60 * 60 * 1000) {
        return '昨天'
      } else {
        return Math.floor(diff / (24 * 60 * 60 * 1000)) + '天前'
      }
    },

    // 返回
    goBack() {
      uni.navigateBack()
    },

    // 收藏教员
    collectTeacher() {
      uni.showToast({
        title: '功能开发中',
        icon: 'none'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.teacher-detail-container {
  background: #f5f5f5;
  min-height: 100vh;
  // padding-bottom: 120rpx;
  position: relative;
}

/* 顶部渐变背景 */
.header-gradient {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 450rpx;
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  overflow: hidden;
  z-index: 0;

  .gradient-circle {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
  }

  .circle-1 {
    width: 400rpx;
    height: 400rpx;
    top: -150rpx;
    right: -100rpx;
    animation: pulse 4s ease-in-out infinite;
  }

  .circle-2 {
    width: 250rpx;
    height: 250rpx;
    bottom: -50rpx;
    left: -50rpx;
    animation: pulse 4s ease-in-out infinite 1s;
  }
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.3;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.5;
  }
}

/* 自定义导航栏 */
.custom-navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  padding-top: var(--status-bar-height, 44px);
  height: calc(88rpx + var(--status-bar-height, 44px));
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 30rpx;
  padding-right: 30rpx;

  .navbar-left, .navbar-right {
    width: 80rpx;
    height: 80rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s;

    &:active {
      background-color: rgba(255, 255, 255, 0.15);
      transform: scale(0.95);
    }
  }

  .navbar-title {
    flex: 1;
    text-align: center;
    color: #fff;
    font-size: 36rpx;
    font-weight: 600;
    text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
  }
}

.teacher-info-section {
  // margin: calc(88rpx + var(--status-bar-height, 44px) + 40rpx) 30rpx 20rpx;
  padding: 40rpx;
  position: relative;
  z-index: 1;
  border-radius: 24rpx;
  box-shadow: 0 12rpx 32rpx rgba(0, 0, 0, 0.08);

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6rpx;
    // background: linear-gradient(90deg, #f093fb 0%, #f5576c 100%);
    border-radius: 24rpx 24rpx 0 0;
  }
  
  .teacher-header {
    display: flex;
    align-items: flex-start;
    margin-bottom: 20rpx;
    
    .teacher-avatar {
      position: relative;
      margin-right: 20rpx;
      
      .online-status {
        position: absolute;
        right: -5rpx;
        bottom: -5rpx;
        width: 20rpx;
        height: 20rpx;
        background: #19be6b;
        border: 3rpx solid white;
        border-radius: 50%;
      }
    }
    
    .teacher-basic {
      flex: 1;
      
      .teacher-name {
        display: block;
        font-size: 36rpx;
        font-weight: bold;
        color: #333;
        margin-bottom: 10rpx;
      }
      
      .teacher-school {
        display: block;
        font-size: 28rpx;
        color: #666;
        margin-bottom: 15rpx;
      }
      
      .teacher-rating {
        display: flex;
        align-items: center;
        
        .rating-text {
          font-size: 26rpx;
          color: #999;
          margin-left: 10rpx;
        }
      }
    }
    
    .teacher-price {
      background: linear-gradient(135deg, #3cc51f 0%, #3cc51f 100%);
      color: white;
      padding: 12rpx 24rpx;
      border-radius: 30rpx;
      // box-shadow: 0 4rpx 12rpx rgba(240, 147, 251, 0.3);

      .price {
        font-size: 32rpx;
        font-weight: bold;
        text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
      }
    }
  }
  
  .teacher-subjects {
    margin-bottom: 30rpx;
  }
  
  .teacher-stats {
    display: flex;
    justify-content: space-around;
    padding-top: 20rpx;
    border-top: 1rpx solid #f0f0f0;
    
    .stat-item {
      text-align: center;
      
      .stat-number {
        display: block;
        font-size: 32rpx;
        font-weight: bold;
        color: #333;
        margin-bottom: 5rpx;
      }
      
      .stat-label {
        font-size: 24rpx;
        color: #999;
      }
    }
  }
}

.intro-section,
.experience-section,
.reviews-section {
  margin: 20rpx 30rpx;
  padding: 40rpx;
  position: relative;
  z-index: 1;
  border-radius: 24rpx;
  background: white;
  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.06);
  transition: all 0.3s;

  &:active {
    transform: translateY(-4rpx);
    box-shadow: 0 12rpx 32rpx rgba(0, 0, 0, 0.1);
  }
  
  .section-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 20rpx;
  }
  
  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20rpx;
    
    .more-text {
      font-size: 26rpx;
      color: #3cc51f;
    }
  }
}

.intro-text {
  font-size: 28rpx;
  color: #666;
  line-height: 1.6;
}

.experience-list {
  .experience-item {
    margin-bottom: 20rpx;
    
    &:last-child {
      margin-bottom: 0;
    }
    
    .exp-title {
      font-size: 28rpx;
      font-weight: bold;
      color: #333;
      margin-bottom: 8rpx;
    }
    
    .exp-desc {
      font-size: 26rpx;
      color: #666;
      line-height: 1.5;
    }
  }
}

.review-list {
  .review-item {
    margin-bottom: 30rpx;
    
    &:last-child {
      margin-bottom: 0;
    }
    
    .review-header {
      display: flex;
      align-items: center;
      margin-bottom: 15rpx;
      
      .review-info {
        flex: 1;
        margin-left: 15rpx;
        
        .reviewer-name {
          display: block;
          font-size: 26rpx;
          color: #333;
          margin-bottom: 5rpx;
        }
      }
      
      .review-time {
        font-size: 24rpx;
        color: #999;
      }
    }
    
    .review-content {
      font-size: 26rpx;
      color: #666;
      line-height: 1.5;
    }
  }
}

.bottom-actions {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  padding: 24rpx 30rpx;
  display: flex;
  gap: 20rpx;
  box-shadow: 0 -8rpx 24rpx rgba(0, 0, 0, 0.08);
  z-index: 999;

  /deep/ .u-button {
    height: 96rpx !important;
    border-radius: 48rpx !important;
    font-size: 32rpx !important;
    font-weight: 600 !important;
    transition: all 0.3s !important;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1) !important;

    &:active {
      transform: scale(0.96) !important;
    }

    &[type="primary"] {
      background: linear-gradient(135deg, #3cc51f 0%, #2ea516 100%) !important;
      border-color: #3cc51f !important;
      box-shadow: 0 4rpx 12rpx rgba(60, 197, 31, 0.4) !important;
    }
  }
}
</style> 